<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="left" size="18" color="#333"></uni-icons>
      </view>
      <text class="title">问题详情</text>
      <view class="placeholder"></view>
    </view>
    
    <!-- 问题内容 -->
    <view class="question-card">
      <view class="question-header">
        <view class="q-icon">Q</view>
        <text class="q-text">{{question.question}}</text>
      </view>
      <view class="question-stats">
        <text class="view-count">{{question.views}}人浏览</text>
        <text class="helpful" @click="markHelpful">
          <uni-icons :type="isHelpful ? 'hand-thumbsup-filled' : 'hand-thumbsup'" size="18" :color="isHelpful ? '#1890ff' : '#999'"></uni-icons>
          有帮助({{helpfulCount}})
        </text>
      </view>
      <view class="divider"></view>
      <view class="answer-header">
        <view class="a-icon">A</view>
        <text class="a-label">官方回答</text>
      </view>
      <view class="answer-content">
        <text>{{question.answer}}</text>
      </view>
      <view class="related-section" v-if="relatedQuestions.length > 0">
        <view class="related-title">相关问题</view>
        <view class="related-list">
          <view class="related-item" v-for="(item, index) in relatedQuestions" :key="index" @click="viewQuestion(item)">
            <text class="related-text">{{item.question}}</text>
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 问答互动区 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">家长交流 ({{comments.length}})</text>
      </view>
      <view class="comment-list" v-if="comments.length > 0">
        <view class="comment-item" v-for="(comment, index) in comments" :key="index">
          <view class="comment-header">
            <image class="user-avatar" :src="comment.userAvatar"></image>
            <view class="comment-info">
              <text class="user-name">{{comment.userName}}</text>
              <text class="comment-time">{{comment.time}}</text>
            </view>
          </view>
          <view class="comment-content">
            <text>{{comment.content}}</text>
          </view>
          <view class="comment-actions">
            <text class="action-item" @click="replyComment(comment)">回复</text>
            <text class="action-item" @click="likeComment(index)">
              <uni-icons :type="comment.isLiked ? 'heart-filled' : 'heart'" size="14" :color="comment.isLiked ? '#f04864' : '#999'"></uni-icons>
              {{comment.likes}}
            </text>
          </view>
          <view class="replies" v-if="comment.replies && comment.replies.length > 0">
            <view class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="replyIndex">
              <view class="reply-header">
                <image class="reply-avatar" :src="reply.userAvatar"></image>
                <view class="reply-info">
                  <view class="reply-name-wrap">
                    <text class="reply-name">{{reply.userName}}</text>
                    <text class="reply-to" v-if="reply.replyTo">回复 {{reply.replyTo}}</text>
                  </view>
                  <text class="reply-time">{{reply.time}}</text>
                </view>
              </view>
              <view class="reply-content">
                <text>{{reply.content}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="empty-comments" v-else>
        <text>暂无讨论，成为第一个发表看法的家长吧</text>
      </view>
    </view>
    
    <!-- 评论框 -->
    <view class="comment-bar">
      <input class="comment-input" type="text" placeholder="分享您的经验和看法..." v-model="commentText" @confirm="submitComment" />
      <view class="submit-btn" @click="submitComment">发送</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      questionId: null,
      questionType: 'faq', // 默认为FAQ类型问题
      question: {
        id: 1,
        question: "NOI和NOIP有什么区别？",
        answer: "NOI（全国信息学奥林匹克竞赛）是国家级比赛，是选拔国家集训队的重要依据；而NOIP（全国青少年信息学奥林匹克联赛）是全国性的初级赛事，分为普及组和提高组，是NOI的选拔性比赛。\n\nNOI通常在每年7-8月举行，面向全国高中生，难度较大；NOIP通常在每年10-11月举行，分为初赛和复赛，初赛主要考察基础知识，复赛考察编程能力，面向全国中小学生。\n\nNOIP获奖后，可以升级参加全国中学生信息学奥林匹克冬令营（WC），表现优秀的选手可以进入国家集训队，参与NOI比赛和国际信息学奥林匹克（IOI）的选拔。",
        views: 1532
      },
      isHelpful: false,
      helpfulCount: 28,
      relatedQuestions: [
        { 
          id: 4,
          question: "CSP和NOIP有什么区别？"
        },
        { 
          id: 5,
          question: "如何备战NOIP比赛？"
        },
        { 
          id: 6,
          question: "获得NOIP奖项对升学有什么帮助？"
        }
      ],
      comments: [
        {
          id: 1,
          userAvatar: "/static/avatar1.png",
          userName: "张爸爸",
          time: "2天前",
          content: "我家孩子去年参加了NOIP普及组，今年想参加提高组，这个难度跨度大吗？需要额外准备哪些知识点？",
          likes: 5,
          isLiked: false,
          replies: [
            {
              id: 1,
              userAvatar: "/static/avatar2.png",
              userName: "李妈妈",
              time: "1天前",
              content: "我家孩子也是这样过来的，提高组会增加动态规划等算法，难度确实提升不小，建议提前两个月开始准备。",
              replyTo: "张爸爸"
            },
            {
              id: 2,
              userAvatar: "/static/coach1.png",
              userName: "张教练",
              time: "1天前",
              content: "从普及组到提高组主要增加的知识点有：动态规划基础、图论基础、高级数据结构（如并查集、线段树初步）。建议先巩固基础算法，再逐步学习新内容。",
              replyTo: "张爸爸"
            }
          ]
        },
        {
          id: 2,
          userAvatar: "/static/avatar3.png",
          userName: "刘妈妈",
          time: "3天前",
          content: "我想问一下，初一的孩子直接准备NOIP提高组是不是太早了？会不会压力太大？",
          likes: 3,
          isLiked: false,
          replies: []
        }
      ],
      commentText: ""
    };
  },
  onLoad(options) {
    if (options.id) {
      this.questionId = options.id;
    }
    if (options.type) {
      this.questionType = options.type;
    }
    
    // 根据问题类型和ID加载不同的数据
    this.loadQuestionData();
  },
  methods: {
    loadQuestionData() {
      // 在实际应用中，这里会发送请求获取数据
      if (this.questionType === 'community') {
        // 加载社区问题数据
        console.log('加载社区问题，ID:', this.questionId);
        // 这里模拟加载社区问题数据
      } else {
        // 加载普通FAQ问题数据
        console.log('加载FAQ问题，ID:', this.questionId);
        // 继续使用现有的问题数据
      }
    },
    goBack() {
      uni.navigateBack();
    },
    markHelpful() {
      this.isHelpful = !this.isHelpful;
      if (this.isHelpful) {
        this.helpfulCount++;
      } else {
        this.helpfulCount--;
      }
      uni.showToast({
        title: this.isHelpful ? '已标记为有帮助' : '已取消标记',
        icon: 'none'
      });
    },
    viewQuestion(question) {
      uni.navigateTo({
        url: `/pages/knowledge/question?id=${question.id}`
      });
    },
    replyComment(comment) {
      this.commentText = `回复 ${comment.userName}：`;
      // 聚焦到输入框
      // 需要在页面中给input添加id属性
    },
    likeComment(index) {
      this.comments[index].isLiked = !this.comments[index].isLiked;
      if (this.comments[index].isLiked) {
        this.comments[index].likes++;
      } else {
        this.comments[index].likes--;
      }
    },
    submitComment() {
      if (!this.commentText.trim()) {
        uni.showToast({
          title: '评论内容不能为空',
          icon: 'none'
        });
        return;
      }
      
      // 添加新评论
      const newComment = {
        id: this.comments.length + 1,
        userAvatar: "/static/my-avatar.png", // 用户自己的头像
        userName: "我", // 用户自己的名称
        time: "刚刚",
        content: this.commentText,
        likes: 0,
        isLiked: false,
        replies: []
      };
      
      this.comments.unshift(newComment);
      this.commentText = "";
      
      uni.showToast({
        title: '评论成功',
        icon: 'success'
      });
    }
  }
};
</script>

<style>
.container {
  padding: 30rpx;
  padding-bottom: 120rpx; /* 为底部评论框留出空间 */
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.placeholder {
  width: 60rpx;
}

.question-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.question-header {
  display: flex;
  margin-bottom: 20rpx;
  align-items: flex-start;
}

.q-icon, .a-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.q-icon {
  background-color: #f04864;
  color: #fff;
}

.a-icon {
  background-color: #1890ff;
  color: #fff;
}

.q-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
  flex: 1;
}

.question-stats {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 20rpx;
}

.helpful {
  display: flex;
  align-items: center;
}

.divider {
  height: 1rpx;
  background-color: #eee;
  margin: 20rpx 0;
}

.answer-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.a-label {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.answer-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;
  margin-bottom: 30rpx;
  white-space: pre-line; /* 保留换行符 */
}

.related-section {
  background-color: #f8f8f8;
  border-radius: 12rpx;
  padding: 20rpx;
}

.related-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.related-list {
  display: flex;
  flex-direction: column;
}

.related-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #eee;
}

.related-item:last-child {
  border-bottom: none;
}

.related-text {
  font-size: 26rpx;
  color: #1890ff;
  flex: 1;
}

.section-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.comment-list {
  display: flex;
  flex-direction: column;
}

.comment-item {
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.user-avatar, .reply-avatar {
  border-radius: 50%;
  margin-right: 16rpx;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
}

.reply-avatar {
  width: 50rpx;
  height: 50rpx;
}

.comment-info, .reply-info {
  display: flex;
  flex-direction: column;
}

.user-name, .reply-name {
  font-size: 26rpx;
  color: #333;
}

.comment-time, .reply-time {
  font-size: 22rpx;
  color: #999;
}

.comment-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 12rpx;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12rpx;
}

.action-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
  margin-left: 30rpx;
}

.replies {
  background-color: #f8f8f8;
  border-radius: 12rpx;
  padding: 16rpx;
  margin-bottom: 12rpx;
}

.reply-item {
  margin-bottom: 16rpx;
}

.reply-item:last-child {
  margin-bottom: 0;
}

.reply-header {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.reply-name-wrap {
  display: flex;
  align-items: center;
}

.reply-to {
  font-size: 24rpx;
  color: #999;
  margin-left: 8rpx;
}

.reply-content {
  font-size: 26rpx;
  color: #333;
  padding-left: 66rpx;
}

.empty-comments {
  display: flex;
  justify-content: center;
  padding: 30rpx 0;
  font-size: 28rpx;
  color: #999;
}

.comment-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.comment-input {
  flex: 1;
  height: 70rpx;
  background-color: #f5f7fa;
  border-radius: 35rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
}

.submit-btn {
  width: 120rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1890ff;
  color: #fff;
  border-radius: 35rpx;
  margin-left: 20rpx;
  font-size: 26rpx;
}
</style> 